웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > html

[HTML] textarea 태그의 특징 및 기본 속성 알아보기

Last Modified : 2016-04-29 / Created : 2014-01-21
12,826
View Count

textarea 태그는 홈페이지를 만들때 많이 사용되는 태그 중 하나입니다. 사용자의 입력을 받아 처리할 수 있는 입력폼으로 일반적인 레이아웃에 관련 속성외에 이벽값에 대한 추가적인 속성을 가지고 있습니다.

입력폼의 경우 자주 사용되는 태그는 보통 짧은 글이나 문장에 input 태그가 사용되고 긴 글 또는 띄어씌기를 보여줘야하는 경우는 대부분 textarea 태그가 사용됩니다.

아래는 textarea 태그의 모습입니다.

<textarea>입력할 내용</textarea>


! textarea 태그 특징은?


textarea
태그의 가장 큰 특징은 입력폼 안에 사용된 태그 및 띄어쓰기가 그대로 출력되는 점입니다. 그렇기 때문에 별도의 띄어쓰기 및 줄바꿈 태그등이 없이 사용자가 입력한 내용이 그대로 표현되죠.

그리고, 자주 쓰이는 속성중에 readonly가 있으며 이는 읽기만 가능하도록 해주는 속성입니다. 읽기만 가능하기 때문에 사용자가 글을 적을 수 없게 비활성화됩니다. 그럼 아래 예제를 참고하세요.


! textarea 태그 사용예제 보기


<body>
   <textarea readonly="readonly" rows="3">http://webisfree.com</textarea>
</body>


위 코드를 입력하였을 경우 아래와 같은 입력폼이 나타나게 됩니다. readonly가 설정되어 입력 또는 수정이 안됩니다. 그리고 br 태그 역시 적용 안되고 그대로 나타나게됩니다.




그럼 readonly를 빼보면 어떻게 될까요? 입력폼에 작성 및 수정이 가능하게 됩니다.



* 예제에 사용된 속성의 설명


readonly="readonly" // readonly로 설정시 입력 및 수정 불가
cols="5" // 세로 길이의 지정
rows="10" // 가로 길이의 지정
참고로, 브라우저별로 편차가 있기 때문에 가급적 CSS를 통해서 넓이 및 높이의 스타일을 지정하는 것이 좋습니다.

Previous

[HTML] 테이블 만들기, table 태그를 사용해 레이아웃 구성하기

Previous

[HTML5] Mark tag를 사용하기, highlighted or marked text